import React from 'react';
import {
  Input,
  Divider,
  message,
  Form
} from 'antd';

class NormalForm extends React.Component {
  constructor(props) {
    super(props);
    props.saveInstance && props.saveInstance(this)
  }

  handleSubmit = (event) => {
    event && event.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) {
        return false;
      }
      this.props.onSaveForm({...values, id: this.props.data._id});
    });
  }

  componentDidMount(){
    if (this.props.data._id) {
      this.setFieldsValue();
    }
  }

  componentDidUpdate(prevProps){
    if ( prevProps.data._id != this.props.data._id ) {
      this.setFieldsValue();
    }
  }

  setFieldsValue = () => {
    const data = this.props.data;
    this.props.form.setFieldsValue({
      suppliercompanyname: data.suppliercompanyname,
      managername: data.managername,
      tel: data.tel,
      address: data.address,
      remark: data.remark
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const buttonItemLayout = {
      wrapperCol: { span: 14, offset: 6 },
    };
    return (
      <div>
        <Form layout="horizontal">
          <Form.Item label="供应商" {...formItemLayout}>
            {
              getFieldDecorator('suppliercompanyname', {
                rules: [{ required: true, message: '请输入供应商' }],
              })(
                <Input placeholder="请输入供应商" />
              )
            }
          </Form.Item>
          <Form.Item label="联系人" {...formItemLayout}>
            {
              getFieldDecorator('managername', {
                rules: [{ required: true, message: '请输入供应商联系人' }],
              })(
                <Input placeholder="请输入供应商联系人" />
              )
            }            
          </Form.Item>
          <Form.Item label="手机号" {...formItemLayout}>
          {
              getFieldDecorator('tel', {
                rules: [
                  { required: true, message: '请输入供应商手机号' },
                  { pattern: /^1\d{10}$/, message: '请输入正确的手机号'}
                ],
              })(
                <Input placeholder="请输入供应商手机号" />
              )
            }                
          </Form.Item>
          <Form.Item label="地址" {...formItemLayout}>
          {
              getFieldDecorator('address', {
                rules: [],
              })(
                <Input placeholder="请输入供应商地址" />
              )
            }                
          </Form.Item>
          <Form.Item label="备注" {...formItemLayout}>
          {
              getFieldDecorator('remark', {
                rules: [],
              })(
                <Input placeholder="请输入备注" />
              )
            }                
          </Form.Item>                    
        </Form>
      </div>
    );
  }
}


export default Form.create()(NormalForm)